<template>
    <view class="pageContent">
        <view class="car-search row-center">
            <view class="select-area-item">
                <view class="row-center" @click="changeRegionString()">
                    <text>地区：</text>
                    <text class="area-name ellipsis-text">{{ from.address || '全国' }}</text>
                </view>
                <u-icon v-if="from.address == ''" name="arrow-down-fill" @click="changeRegionString()"></u-icon>
                <u-icon v-else name="close-circle-fill" size="30rpx" @click.stop="clearFilx()"></u-icon>
            </view>
        </view>
        <view class="car-list" v-for="(item, index) in carSaleList" :key="index">
            <view class="item" @click="clickMore(`/subPages/enter/salesDetails?id=${item.id}`)">
                <view class="car-title">{{ item.companyName }}</view>
                <view class="car-text">联系人：{{ item.linkmanName }}</view>
                <view class="car-text">联系电话：{{ item.phone }}</view>
            </view>
        </view>

        <liu-choose-address ref="scroll" @change='chooseSuccess' :key="isAddress"></liu-choose-address>
    </view>
</template>

<script>
import settleIn from '@/api/settleIn.js'
export default {
    name: 'salesList',
    components: {

    },
    data() {
        return {
            startCityItemValue: [],
            endCityItemValue: [],
            carSaleList: [],
            from: {
                province: '',
                city: '',
                address: ''
            },
            cityObject: {
                province: '',
                provinceString: '',
                city: '',
                cityString: '',
                region: '',
                regionString: '',
                aimProvince: '',
                aimProvinceString: '',
                aimCity: '',
                aimCityString: '',
                aimRegion: '',
                aimRegionString: ''
            },
        }
    },

    async onLoad() {
        this.salesList()
    },
    async onShow() {
    },
    methods: {

        clickMore(push) {
            uni.navigateTo({
                url: push
            });
        },
        changeRegionString() {
            this.isAddress = !this.isAddress
            console.log('改变起始地')
            this.type = 1
            this.$refs.scroll.open()
        },
        //地址选择成功
        chooseSuccess(e) {
            this.from.province = e.value[0].value
            this.from.city = e.value[1].value
            this.from.address = e.value[0].label + e.value[1].label
            this.salesList()
        },
        clearFilx() {
            this.from = {
                province: '',
                city: '',
                address: ''
            }
            this.salesList()
        },
        // 获取销售公司
        async salesList() {
            let res = await settleIn.automobileMarketList({
                user_id: uni.getStorageSync('userId'),
                ...this.from
            });
            if (res.code == 200) {
                this.carSaleList = res.rows

            }
        },
        getItem(e) {
            // console.log(e, '222222222')
        }
    }
}
</script>

<style lang="scss" scoped>
.pageContent {
    background: #fff;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 30rpx 28rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.car-search {
    padding-top: 8rpx;
    padding-bottom: 16rpx;
}

.select-area-item {
    // width: 300rpx;
    width: 50%;
    flex: 1;
    height: 64rpx;
    background: #f6f6f6;
    font-size: 26rpx;
    color: #666;
    margin-right: 20rpx;
    border-radius: 8rpx;
    line-height: 64rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:last-of-type {
        margin-right: 0;
    }

    .area-name {
        display: inline-block;
        font-size: 26rpx;
        color: #333;
        max-width: 160rpx;
    }
}

.car-list {
    margin: 36rpx 0rpx;
    height: 180rpx;
    border-radius: 12rpx;
    // border: 1rpx solid #000;
    padding: 20rpx;
    box-shadow: 2rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.5);

    .item {
        margin-bottom: 20rpx;
    }

    .car-title {
        color: #000000;
        font-family: "PingFang SC";
        font-size: 30rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 40rpx;
        opacity: 0.9;
    }

    .car-text {
        color: #000000;
        font-family: "PingFang SC";
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        opacity: 0.5;
        margin-top: 20rpx;
    }
}
</style>